<template>
  <div class="CategorySub">
    <!-- 二级分类下的主模块 -->
    <div class="container">
      <!-- 筛选区 -->
      <sub-filter
        :brands="subFilterData.brands"
        :saleProperties="subFilterData.saleProperties"
      ></sub-filter>
      <!-- 结果区 -->
      <sub-goods-list></sub-goods-list>
    </div>
  </div>
</template>
<script>
/* 引入sub-filter过滤组件 */
import SubFilter from "components/privately/Category/sub/SubFilter";
import subGoodsList from "components/privately/Category/sub/subGoodsList";
/* 引入请求数据 */
import { getCategorySubData } from "api/category/category.js";
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {},
  name: "CategorySub",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      subFilterData: [],
    });
    getCategorySubData(route.params.id).then((res) => {
      data.subFilterData = res.result;
    });
    onBeforeRouteUpdate(() => {
      getCategorySubData(route.params.id).then((res) => {
        data.subFilterData = res.result;
      });
    });
    return { ...toRefs(data) };
  },
  components: {
    SubFilter,
    subGoodsList,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.CategorySub {
  width: 100%;
  background-color: #f5f5f5;
  border-top: 1px solid transparent;
}
</style>